<template>
  <div class="detuil">
    <div id="box">
      <header style="display: flex;"><i class=""  @click='back'>返回</i><b>{{type}}</b></header>
      <div class="shop">
        <div class="img"><img :src="proimg"></div>
        <div class="main">
          <h3>{{ brand}} </h3>
          <p class="p1">{{title}}</p>
          <p class="p2">￥{{ price}} <b>促销</b></p>
        </div>
        <div class="cheap">
          <div class="cheap1">优惠信息</div>
          <div class="cheap2"><span class="te">直降</span><span>官方精选配件专场-限时直降</span></div>
          <div class="cheap3"><span class="te">优惠</span><span>【APP专享】10元锤子商城通用优惠券</span>
        </div>
        <div>
          <h6>已选版本</h6>
          <p>{{classification}}</p>
        </div>
      </div>
    </div>
  </div>
    <footer>
      <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart" info='.'/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" style="border-radius: 0;"/>
      <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" style="border-radius: 0;"/>
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import {
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Card,
  Toast
} from 'vant'
Vue
  .use(GoodsAction)
  .use(GoodsActionIcon)
  .use(GoodsActionButton)
Vue.use(Card)
Vue.use(Toast)
export default {
  data () {
    return {
      proid: '',
      type: '',
      classification: '',
      brand: '',
      proimg: '',
      price: '',
      title: '',
      commentlist: []
    }
  },
  created () {
    let proid = this.$route.params.proid
    console.log(this.type)
    axios.get('/pro/detuil?proid=' + proid).then(res => {
      console.log(res)
      this.proid = res.data.data.proid
      this.proimg = res.data.data.proimg
      this.brand = res.data.data.brand
      this.price = res.data.data.price
      this.title = res.data.data.title
      this.type = res.data.data.type
      this.classification = res.data.data.classification
      console.log(this.price)
    })
  },
  methods: {
    back () {
      this.$router.back()
    },
    toCart () {
      this.$router.push('/cart')
    },
    addCart () {
      let token = localStorage.getItem('token') ? localStorage.getItem('token') : false
      if (!token) {
        this.$router.push('/register-login')
        return
      }
      let userid = localStorage.getItem('userid')
      let proid = this.proid
      let num = 1
      let url = '/cart/add?userid=' + userid + '&proid=' + proid + '&token=' + token + '&num=' + num
      // console.log(1)
      axios.get(url).then(res => {
        if (res.data.code === 10119) {
          this.$router.push('/login')
        } else {
          Toast.success('加入购物车成功')
        }
      })
    }
  }
}
</script>

<style lang="scss" >
@import '@/lib/reset.scss';
  header{
    min-height:50px;
    background:#000;
    color:#fff;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    i{
      display: inline-block;
      @include flex(1)
    }
    b{
      display: inline-block;
      @include flex(4);
      text-align: left;
      text-indent: 80px;
    }
  }
  .shop{
    height: auto;
    overflow: auto;
    .img{
      width:375px;
      height: 300px;
      margin: 0 auto;
      display: inline-block;
      text-align: center;
      img{
        width: 300px;
        height: 290px;
      }
    }
  }
  .main{
    border-top: 5px solid #eee;
    padding: 16px 18px;
    h3{
      font-size: 16px;
      margin-bottom: 8px;
      color: #333;
    }
    .p1{
    font-size: 12px;
    color: #7f7f7f;
    margin-bottom: 8px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    }
    .p2{
      color: #d44d44;;
      font-size: 20px;
      b{font:300 12px '';
      text-align: center;
        display: inline-block;
        padding: 2px 10px;
        margin-left:20px;
        border-radius: 5px;
        border:1px solid #d4d4d4;
        background: rgb(218, 59, 59);
        color: #f7f7f7;
      }
    }
  }
  .cheap{
     border-top:5px solid #eee;
     padding:16px 18px 0;
     span{
       display: inline-block;
       margin:0 5px;
     }
      .te{
        color: #d44d44;
        background: #b37b78;
        border-color: #f0bab6;
        overflow: hidden;
        display:inline-block;
        text-align: center;
        padding: 2px 10px;
        font-size: 12px;
        font-weight: 700;
        border-radius: 13px;
        background: #f7f7f7;
        border: 1px solid #d3d3d3;
      }
    .cheap1{
      padding:0 0 13px;
      font-size: 12px;
    }
    .cheap2{
      display: flex;
      padding:0 0 13px;
    }
    .cheap3{
      padding:0 0 13px;
    }
  }
  footer{
    overflow: auto;
    height: 50px;
  }
</style>
